<template>
  <div
    :style="{
      height: height + 'rpx',
      width: bannerObj.width ? bannerObj.width + 'rpx' : '100%',
    }"
  >
    <swiper
      :indicator-dots="imgList?.length > 1"
      :autoplay="bannerObj.autoplay"
      :interval="bannerObj.interval"
      :circular="bannerObj.circular"
      indicator-type="expand"
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#ffffff"
      class="swiper_box"
    >
      <template v-if="imgList && imgList.length > 0">
        <swiper-item v-for="(item, index) in imgList" :key="index">
          <div class="banner_item flexCenter">
            <image :src="utils.baseUrl + item.src" mode="scaleToFill"></image>
          </div>
        </swiper-item>
      </template>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import utils from "@/utils";
const prop = defineProps({
  // 轮播图配置
  bannerObj: {
    required: true,
    type: Object as any,
    default: {
      autoplay: true,
      interval: 3000,
      circular: true,

      indicatorDots: true,
    },
  },
  height: {
    type: String,
    default: "500",
  },

  // 图片列表
  imgList: {
    required: true,
    type: Array as any,
    default: [],
  },
});
</script>

<style lang="less" scoped>
.swiper_box,
.banner_item,
image {
  width: 100%;
  height: 100%;
}
</style>
